<template>
    <div>
      <div class="tl-form-line-title sub-title">
        {{ title }}
        <slot name="after-title"></slot>
        <div class="simple-pager">
          <slot  name="left-btn"></slot>
<!--          <i class="el-icon-caret-left" :class="pageInfo.currentPage > 1 ? 'on' : ''" @click="prePage"></i>-->
<!--          <i class="el-icon-caret-right" :class="pageInfo.currentPage < totalPage ? 'on' : ''" @click="nextPage"></i>-->
<!--          当前：{{ pageInfo.currentPage }}/{{ totalPage }}，共{{ pageInfo.totalCount }}条-->
        </div>
        <div class="toolbar" style="margin-right: 20px">
          <el-button type="text" size="medium" icon="el-icon-plus" @click="openAddDialog('tlEditSaveAndCopyForm')" v-if="editable && typeapptype !== '2'">新增任命</el-button>
          <!-- <el-button type="text" size="medium" icon="el-icon-download" @click="doExportExcel" v-hasPermission="['sys:excel:export']">导出</el-button> -->
        </div>
      </div>
    <!--表格渲染-->
      <el-table class="tl-table" ref="mainTable" size="small" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" row-key="id" border fit :row-class-name="doChangeRowClassName">
<!--        <el-table-column type="selection" width="55px" fixed="left" :selectable="doDisableCheckBox"></el-table-column>-->
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="dispappointmenttype" label="任命类型" width="100px" sortable="custom" sort-by="appointmenttype" align="center" header-align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="usercode" label="工号" width="100px" sortable="custom" sort-by="usercode" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="username" label="姓名" width="100px" sortable="custom" sort-by="username" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="workgroup" label="工作组名称" width="200px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispprojectrole" label="项目角色" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="dispduty" label="职责" min-width="300px" sortable="custom" sort-by="duty" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="appointdate" label="任命日期" width="150px" sortable="custom" sort-by="appointdate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="revokedate" label="撤销日期" width="150px" sortable="custom" sort-by="revokedate" align="center" header-align="center" :formatter="dateFormat" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" width="100px" v-slot="scope" fixed="right">
          <el-dropdown trigger="hover">
            <el-button type="text" icon="el-icon-s-operation" style="margin-left:10px">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu>
              <el-dropdown-item icon="el-icon-edit" @click.native="clickEditDialog(scope.row)" :disabled="!editable">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" v-if="showEditOrDelete(scope.row.candelete, scope.row.appointmenttype)" :disabled="!editable" @click.native="doDiffDelete(scope.row)">删除</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit" v-if="showRevoke(scope.row.candelete, scope.row.appointmenttype)" :disabled="!editable" @click.native="doRevoke(scope.row)">撤销</el-dropdown-item>
              <el-dropdown-item icon="el-icon-edit" v-if="showUnRevoke(scope.row.candelete, scope.row.appointmenttype)" :disabled="!editable" @click.native="doDiffDelete(scope.row)">取消撤销</el-dropdown-item>
              <el-dropdown-item icon="el-icon-view" @click.native="clickViewDialog(scope.row)">查看
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-table-column>
        <!-- <el-table-column prop="dispstate" label="状态" width="100px" sortable="custom" sort-by="state" align="center"
          header-align="center" :show-overflow-tooltip="true"></el-table-column> -->
      </el-table>
      <tl-edit-save-and-copy ref="tlEditSaveAndCopyForm" @refresh="doRefresh" :parentId="parentId" :projectCode="projectCode" :teamType="teamType" :teamName="title" :grouptype="grouptype"></tl-edit-save-and-copy>
      <tl-edit-revoke ref="tlEditRevokeForm" @refresh="doRefresh" :parentId="parentId" :projectCode="projectCode" :teamType="teamType" :pre-team-type="preTeamType" :grouptype="grouptype">
      </tl-edit-revoke>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
import { mixin_list_base } from '/src/mixins/mixin_list_base'
import tlEditSaveAndCopy from './editSaveAndCopy'
import tlEditRevoke from './editRevoke'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { checkPermission } from '@tapui/utils/permission'
export default {
  name: 'mpmProjectTeam',
  mixins: [mixin_list, mixin_list_base],
  components: { tlEditSaveAndCopy, tlEditRevoke },
  data() {
    return {
      description: '项目任命-项目组成员-列表查询',
      urlPrefix: '/mpm/projectTeam/',
      url: {
        queryCodeList: '/mpm/projectTeam/dataCodeList',
        list: '/mpm/projectTeam/queryList',
        deleteRevoke: '/mpm/projectTeam/deleteRevoke',
        insertRevoke: '/mpm/projectTeam/insertRevoke'
      },
      // 排序参数
      sorterInfo: {
        sidx: 'sortcode',
        sord: 'asc'
      },
      isQueryOnCreated: false,
      rowDbClickActionType: 'view',
      pageInfo: {
        currentPage: 1, // 当前页面
        pageSize: 0, // 每页记录数
        pageSizes: ['10', '50', '100'],
        totalCount: 0 // 总数
      }
    }
  },
  props: {
    parentId: {
      type: [Number, String],
      default: ''
    },
    projectCode: {
      type: [String],
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    teamType: {
      type: [Number],
      default: 0
    },
    preTeamType: {
      type: [String],
      default: ''
    },
    grouptype: {
      type: Number,
      default: NaN
    },
    typeapptype: {
      type: String,
      default: '1'
    }
  },
  computed: {
    // 编辑/删除按钮的显示/隐藏
    showEditOrDelete() {
      return (candelete, appointmenttype) => {
        if (candelete === 1 || this.typeapptype === '2' || appointmenttype === '2') {
          return false
        }
        return true
      }
    },
    showUnRevoke() {
      return (candelete, appointmenttype) => {
        if (candelete === 1 || this.typeapptype === '2' || appointmenttype === '1') {
          return false
        }
        return true
      }
    },
    showRevoke() {
      return (candelete, appointmenttype) => {
        if (candelete === 0 || this.typeapptype === '2' || appointmenttype === '2') {
          return false
        }
        return true
      }
    }
  },
  watch: {
    teamType: {
      immediate: true,
      handler(value, oldvalue) {
        if (value && value > 0) {
          this.doQuery()
        }
      }
    }
  },
  methods: {
    /** 表格双击事件 */
    doRowDbClick(row, column, event) {
      if (this.editable) {
        this.clickEditDialog(row)
      } else {
        this.clickViewDialog(row)
      }
    },
    clickViewDialog(row) {
        if (row.appointmenttype === '2') {
          this.openViewDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
        } else {
          this.openViewDialog('tlEditSaveAndCopyForm', row[this.$refs.mainTable.rowKey])
        }
    },
    clickEditDialog(row) {
      if (row.appointmenttype === '2') {
        this.openEditDialog('tlEditRevokeForm', row[this.$refs.mainTable.rowKey])
      } else {
        this.openEditDialog('tlEditSaveAndCopyForm', row[this.$refs.mainTable.rowKey])
      }
    },
    beforeLoadData() {
      if (!this.parentId) {
        return false
      }
      this.queryParam.parentid = this.parentId
      this.queryParam.teamType = this.teamType
      return true
    },
    /** 删除任命或撤销 */
    doDiffDelete(row) {
      if (!this.url.delete) {
        this.$tap.alert('请设置delete地址!', 'warning')
        return
      }
      let delwords = row.appointmenttype === '1' ? '确定删除数据吗？' : '确定取消撤销工作组成员吗？'
      this.$tap
        .confirm(delwords)
        .then((_) => {
          if (!this.beforeDoDelete(row.id)) {
            return
          }
          const deleteUrl = row.appointmenttype === '1' ? this.url.delete : this.url.deleteRevoke
          deleteAction(deleteUrl, { ids: row.id }).then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.loadData()
              this.afterDoDelete(row.id)
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        })
        .catch((_) => {})
    },
    // 打开编辑页面时传递candelete参数
    beforeOpenEditDialog(editForm, id) {
      this.$refs[editForm].candelete = this.datas.filter((item) => item.id === id)[0].candelete
      return true
    },
    // 撤销任命
    doRevoke(row) {
      this.$tap
        .confirm('确认撤销工作组成员吗？')
        .then((_) => {
          postAction(this.url.insertRevoke, { ids: row.id }).then((res) => {
            if (res.success) {
              this.$tap.message(res.message, 'success')
              this.loadData()
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        })
        .catch((_) => {})
    }
  }
}
</script>

<style scoped lang="scss">
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 10px; // 横向滚动条
    height: 7px; // 纵向滚动条 必写
  }
  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius:  3px;
    background-color: rgba(144,147,153,.3)
  }
  /deep/ .el-table__fixed-right {
     height: 100% !important;
  }
  /deep/ .el-table__body-wrapper {
    cursor: pointer;
  }
</style>

